import { connect } from "react-redux";
import React, { Component } from "react";
import AppLoading from "../../../components/app-loading/Loading";
import Header from "../../../components/header/header";
import { requestHomeData } from "../../home/Root/reducer";
import { requestListDataById } from "./reducer";
import List from "./children/list";
import Menu from "./children/menu";
import "./style.scss";
class Root extends Component {
    state = {};
    listRef = React.createRef();
    render() {
        const { menuID, showData } = this.state;
        const { menu, history, loading } = this.props;
        return (
            <div className="page" id="category-root">
                <Header />
                <div className="content">
                    {loading && <AppLoading />}
                    <Menu
                        data={menu}
                        selected={menuID}
                        onChange={(value) => {
                            history.replace({
                                pathname: "/category",
                                state: { id: value },
                            });
                        }}
                    />
                    <List
                        data={showData}
                        ref={this.listRef}
                        onPullDown={this.requestListData.bind(
                            this,
                            this.state.menuID,
                            true
                        )}
                    />
                </div>
            </div>
        );
    }
    static getDerivedStateFromProps(props) {
        // 计算选中分类数据
        let menuID = null;
        if (props.location.state && props.location.state.id) {
            menuID = props.location.state.id;
        } else if (props.menu.size > 0) {
            menuID = props.menu.getIn([0, "id"]);
        }

        let showData = [];
        if (menuID && props.listMap.get(menuID)) {
            showData = props.listMap.get(menuID);
        }
        return {
            menuID,
            showData,
        };
    }
    componentDidMount() {
        // 如果分类模块没有数据，让home模块进行请求数据
        if (this.props.menu.size <= 0) {
            this.props.requesMenutData();
        }

        //判断是否存在menuID
        if (this.state.menuID) {
            this.requestListData(this.state.menuID);
        }
    }
    componentDidUpdate(oldProps, oldState) {
        if (oldState.menuID !== this.state.menuID) {
            // id变化了,请求列表数据
            this.requestListData(this.state.menuID);
        } else if (oldProps.listMap !== this.props.listMap) {
            // listMap请求回来了，关闭下拉刷新
            this.listRef.current.closePullDown();
        }
    }
    requestListData = (id, reload = false) => {
        //如果列表数据没有，则发起请求
        if (!this.props.listMap.get(this.state.menuID) || reload) {
            this.props.requestListData(id);
        }
    };
}

export default connect(
    (state) => ({
        menu: state.getIn(["home", "cate"]),
        listMap: state.getIn(["cate", "menuListData"]),
        // loading:state.getIn(['cate','loading'])
        loading: state.getIn(["cate", "loading"]),
    }),
    (dispatch) => ({
        //请求列表数据
        requesMenutData() {
            dispatch(requestHomeData());
        },
        // 请求列表菜单数据
        requestListData(id) {
            dispatch(requestListDataById(id));
        },
    })
)(Root);
